<template>
  <div @click="toFoodDetails"
       class="h-[90px] relative flex flex-row box-border p-[4px] border-0 border-b border-solid border-gray-400">
    <img v-lazy="baseURL+itemData.food_img" class="w-[110px] h-full" alt=""
         @click.stop="showImage(baseURL+itemData.food_img)"/>
    <ul class="flex-1 overflow-auto text-[12px] flex flex-col justify-between ml-[4px]">
      <li class="text-[18px] font-bold">{{ itemData.food_name }}</li>
      <li class="text-red-500">月售：{{ itemData.saleCount }}</li>
      <li>价格：：{{ itemData.price }}</li>
      <li>分类：{{ itemData.categoryInfo.category_name }}</li>
    </ul>
    <div class="absolute right-[5px] top-[5px] rounded-full p-[2px]">
      <span class="iconfont icon-heart text-[24px] text-red-600"></span>
    </div>
  </div>
</template>

<script>
import {Image as VanImage, ImagePreview} from "vant";

export default {
  name: "FoodItem",
  props: ["itemData"],
  inject: ["baseURL"],
  methods: {
    showImage(src) {
      ImagePreview([src]);
    },
    toFoodDetails() {
      this.$router.push({
        name: "FoodDetail",
        params: {
          id: this.itemData.id,
        }
      })
    }
  },
  components: {
    VanImage,
  }
}
</script>

<style scoped>

</style>